<template>
  <div>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.id == ''"
              style="color: red"
              >*</span
            >
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="模板名称"
          align="center"
          width="180"
          ><template slot-scope="scope">
            <span v-if="scope.row.name !== ''">{{ scope.row.name }}</span>
            <el-input
              v-else
              v-model="nameInput"
              type="textarea"
              resize="none"
              :rows="2"
              placeholder="填写模板名称"
            ></el-input> </template
        ></el-table-column>
        <el-table-column
          prop="content"
          label="模板内容"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.content !== ''">{{ scope.row.content }}</span>
            <el-input
              v-else
              v-model="contentInput"
              type="textarea"
              resize="none"
              :rows="2"
              placeholder="填写模板内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.id"
              type="text"
              style="color: red"
              @click="deleteHandler(scope.row.id)"
              >删除</el-button
            >
            <el-button
              v-else
              type="text"
              @click="saveHandler(scope.row)"
              >确定</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import {
  getScheduleTemplate,
  scheduleTemplateDetail,
  saveScheduleTemplate,
  updateScheduleTemplate,
  deleteScheduleTemplate,
} from '/src/http/productSchedule/scheduleCommandTemplate.js'
export default {
  data() {
    return {
      nameInput: '',
      contentInput: '',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      renderData: [],
    }
  },

  mounted() {
    this.getScheduleTemplateApi()
  },

  methods: {
    handleSizeChange(v) {
      this.pageSize = v
      this.getScheduleTemplateApi(this.currentPage, v)
    },

    handleCurrentChange(v) {
      this.currentPage = v
      this.getScheduleTemplateApi(v, this.pageSize)
    },

    saveHandler(v) {
      console.log('确定::: ', v)
      if (this.nameInput == '' || this.contentInput == '') {
        this.$message.error('请填写完整内容')
      } else {
        let params = {
          name: this.nameInput,
          content: this.contentInput,
        }
        this.saveScheduleTemplateApi(params)
      }
      this.nameInput = ''
      this.contentInput = ''
    },

    deleteHandler(v) {
      this.$confirm('此操作将永久删除该信息?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteScheduleTemplateApi(v)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },

    getScheduleTemplateApi(pageNum = 1, pageSize = 10) {
      let params = {
        pageNum,
        pageSize,
      }
      getScheduleTemplate(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total

          if (res.data.records.length >= this.pageSize) return

          this.renderData.push({
            id: '',
            name: '',
            content: '',
          })
        }
      })
    },

    scheduleTemplateDetailApi(params) {
      scheduleTemplateDetail(params).then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
        }
      })
    },

    saveScheduleTemplateApi(params) {
      saveScheduleTemplate(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('保存成功')
          let pgn =
            Number.isInteger(this.total / this.pageSize) == true
              ? this.total / this.pageSize + 1
              : Math.ceil(this.total / this.pageSize)
          this.getScheduleTemplateApi(pgn, this.pageSize)
          this.currentPage = pgn
        } else {
          this.$message.error(res.message)
        }
      })
    },

    updateScheduleTemplateApi(params) {
      updateScheduleTemplate(params).then((res) => {
        if (res.code == 200) {
          this.getScheduleTemplateApi(this.currentPage, this.pageSize)
        }
      })
    },

    deleteScheduleTemplateApi(params) {
      deleteScheduleTemplate(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          if (this.renderData.length == 1 && this.total / this.pageSize > 1) {
            this.getScheduleTemplateApi(this.currentPage - 1, this.pageSize)
            this.currentPage = this.currentPage - 1
          } else {
            this.getScheduleTemplateApi(this.currentPage, this.pageSize)
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
:deep(.el-textarea__inner) {
  border: none !important;
  background-color: rgba(255, 255, 255, 0);
  resize: none;
}
</style>
